<template>
  <div class="Points">
    <div class="index-box">
      <div class="point-record-count">
        <div class="count">120</div>
        <div class="banner">今日积分变动条数</div>
      </div>
    </div>
    <div class="table-box">
      <el-table
        :data="allPointsRecords.list"
        style="width: 100%"
        height="calc(100vh - 270px)"
        :border="true"
      >
        <el-table-column
          prop="record_id"
          label="记录ID"
          width="180"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="create"
          label="创建日期"
          width="180"
          align="center"
        >
        </el-table-column>
        <el-table-column label="受影响者" width="100" align="center">
          <template #default="scope">
            <el-popover trigger="hover">
              <template #reference>
                <span> {{ scope.row.name }}</span>
              </template>
              <p>UID: {{ scope.row.uid }}</p>
              <p>微信昵称: {{ scope.row._wx }}</p>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column
          label="更变详情"
          align="center"
          class-name="point-state"
          width="100"
        >
          <template #default="scope">
            <el-popover trigger="hover">
              <template #reference>
                <i
                  :class="{
                    [scope.row.state.type === 0
                      ? 'el-icon-caret-top'
                      : 'el-icon-caret-bottom']: true,
                    [scope.row.state.type === 0 ? 'T' : 'F']: true,
                  }"
                ></i>
              </template>
              <p>更变前:{{ scope.row.state.before_change }}</p>
              <p>更变后:{{ scope.row.state.after_change }}</p>
            </el-popover>
            <span>{{ scope.row.state.count }}</span>
          </template></el-table-column
        >
        <el-table-column label="操作者" width="100" align="center">
          <template #default="scope">
            <el-popover trigger="hover">
              <template #reference>
                <span> {{ scope.row.operater.name }}</span>
              </template>
              <p>UID: {{ scope.row.operater.uid }}</p>
              <p>微信昵称: {{ scope.row.operater._wx }}</p>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="操作类型" width="100" align="center">
          <template #default="scope">
            <el-tag :type="pointsSource__[scope.row.operater.type].show">{{
              pointsSource__[scope.row.operater.type].text
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="source.type"
          label="来源"
          width="80"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="note"
          label="备注"
          min-width="300"
          align="center"
        >
        </el-table-column>
      </el-table>
      <el-pagination
        background
        :page-size="allPointsRecords.pageSize"
        layout="prev, pager, next"
        :total="allPointsRecords.total"
        :current-page="allPointsRecords.currentIndex"
        @current-change="
          currentIndex => {
            allPointsRecords.currentIndex = currentIndex
            getVipList(allPointsRecords.currentIndex, allPointsRecords.pageSize)
          }
        "
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { defineComponent, onMounted } from 'vue'
import { pointsSource__ } from '../../../utils'
import { usePoints } from '../../../composable/usePoints'
import {
  ElTable,
  ElTableColumn,
  ElIcon,
  ElPopover,
  ElTag,
  ElPagination,
} from 'element-plus'
export default defineComponent({
  components: {
    ElTable,
    ElTableColumn,
    ElIcon,
    ElPopover,
    ElTag,
    ElPagination,
  },
  setup() {
    const { allPointsRecords, getAllPointsRecords } = usePoints()
    onMounted(getAllPointsRecords)
    return { allPointsRecords, getAllPointsRecords, pointsSource__ }
  },
})
</script>

<style lang="scss">
@import '../../../assets/styles/_var.scss';
.Points {
  height: 100%;
  padding: $pad-1;
  .index-box {
    display: flex;
    height: 150px;
    .point-record-count {
      display: flex;
      box-sizing: border-box;
      padding: $pad-2;
      flex-direction: column;
      justify-content: center;
      width: 250px;
      .count {
        font-size: 30px;
        font-weight: bold;
        margin: $pad-1 0;
        color: $gray-8;
      }
      .banner {
        font-size: 14px;
        color: $gray-6;
        font-weight: bold;
      }
    }
  }
  .table-box {
    .point-state .cell {
      display: flex;
      align-items: center;
      i {
        font-size: 18px;
        &.T {
          color: $green;
        }
        &.F {
          color: $red;
        }
      }
      span {
        display: block;
        flex-grow: 1;
      }
    }
    .el-pagination {
      padding: 0;
      margin: $pad-1 0;
    }
  }
}
</style>
